/* google fonts */
@import url("https://fonts.googleapis.com/css2?family=Bungee+Tint&family=Fredericka+the+Great&family=Moderustic:wght@300..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

.fredericka-the-great-regular {
	font-family: "Fredericka the Great", serif;
	font-weight: 400;
	font-style: normal;
}

/* Kontainer untuk tombol audio */
.title-container {
	display: flex;
	gap: 10px;
	background: linear-gradient(to right, #00aaff6e, #ff00d06c);
	border-radius: 3px;
	margin-left: 10px;
	margin-right: 10px;
	color: #ffffff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
}

.audio-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	padding: 7px;
	max-width: 1500px;
	background-color: #1f1f1f;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
}

/* Gaya tombol */
.audio-controls button {
	margin: 0 5px;
	padding: 5px 10px;
	background-color: #4caf4f8f;
	color: rgb(0, 0, 0);
	border: #ffffff;
	cursor: pointer;
	border-radius: 5px;
}

.audio-controls button:hover {
	background-color: #ff45dd8f;
}

@media (max-width: 600px) {
	.audio-controls {
		margin-top: 1.5rem;
		max-width: 35%;
		flex-direction: column;
	}

	.audio-controls button {
		margin: 5px;
		margin-bottom: 1rem;
		width: 50%;
	}

	.title-container {
		display: flex;
		max-width: 100%;
	}
}

body {
	margin: 0;
	background-color: #1f1f1f;
	color: #ffffff;
}

header {
	display: flex;
	justify-content: space-between;
	text-align: center;
	padding: 2rem;
	background: linear-gradient(to right, #00aaff9b, #ff00d0c0);
	color: #fff;
	animation: slideDown 1s ease-out;
	-webkit-animation: slideDown 1s ease-out;
}

header h1 {
	margin: 0;
	padding: 0;
	font-size: 3rem;
	text-align: left;
	animation: zoomIn 5s;
	-webkit-animation: zoomIn 5s;
}

header p {
	font-size: 1.25rem;
	margin-top: 1rem;
	animation: fadeIn 2s ease-out;
}

main {
	padding: 3rem;
	text-align: left;
	animation: fadeInUp 2s ease-out;
}

main p {
	font-size: 1.5rem;
	line-height: 1.6;
	margin-bottom: 2.5rem;
}

.byag a {
	font-weight: bold;
	animation: bounceIn 1s;
	color: #fff;
	text-decoration: none;
}

.byag a:hover {
	text-shadow: 0 0 10px #37ff00;
}

.button-container {
	gap: 0.5rem;
	padding: 20px;
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
}

.btn {
	padding: 7px 11px;
	display: inline-flex;
	color: #ffffff;
	background: linear-gradient(to right, #00aaff83, #ff00d088);
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.2s, transform 0.2s;
	animation: bounceIn 2s ease-in-out infinite;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	-webkit-transition: background-color 0.2s, transform 0.2s;
	-moz-transition: background-color 0.2s, transform 0.2s;
	-ms-transition: background-color 0.2s, transform 0.2s;
	-o-transition: background-color 0.2s, transform 0.2s;
}

.btn:hover {
	background: linear-gradient(to right, #ff00d0, #00aaff);
	transform: scale(1.1);
}

.btn a:link,
.btn a:visited {
	color: rgb(255, 255, 255);
	text-decoration: none;
}

.p-1 {
	margin: 0 2rem;
	animation: bounceIn 2s ease-in-out infinite;
}

footer {
	text-align: center;
	padding: 1rem;
	background-color: #333;
	color: #fff;
	position: fixed;
	bottom: 0;
	width: 100%;
	animation: slideUp 1s ease-out;
}

@keyframes zoomIn {
	0% {
		transform: scale(0.5);
		/* Mulai dengan ukuran 50% */
		opacity: 0;
		/* Transparan */
	}

	100% {
		transform: scale(1);
		/* Berakhir dengan ukuran 100% (asli) */
		opacity: 1;
		/* Opaque */
	}
}

@keyframes backgroundFade {
	0% {
		background-color: #0d0d0d;
	}

	50% {
		background-color: #1a1a1a;
	}

	100% {
		background-color: #0d0d0d;
	}
}

@keyframes slideDown {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes zoomIn {
	from {
		transform: scale(0.5);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes bounceIn {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-20px);
	}

	60% {
		transform: translateY(-10px);
	}
}

/* responsif */

@media (max-width: 1028px) {
	.audio-controls {
		margin-top: 20px;
	}
}

@media (max-width: 768px) {
	.audio-controls {
		margin-top: -15px;
	}
	header {
		padding: 1rem;
	}

	header h1 {
		font-size: 2.5rem;
	}

	header p {
		font-size: 1rem;
	}

	main {
		padding: 1.5rem;
	}

	main p {
		font-size: 1.25rem;
		margin-bottom: 2rem;
	}

	.btn {
		padding: 0.75rem 1.25rem;
		font-size: 0.875rem;
	}

	.p-1 {
		margin: 0 1rem;
	}
}

@media (max-width: 480px) {
	.audio-controls {
		margin-top: 0px;
	}
	header {
		flex-direction: column;
		text-align: center;
	}

	header h1 {
		font-size: 2rem;
		text-align: center;
	}

	header p {
		font-size: 0.875rem;
	}

	main {
		padding: 1rem;
		text-align: center;
	}

	main p {
		font-size: 1rem;
		margin-bottom: 2rem;
	}

	.btn {
		padding: 0.5rem 0.75rem;
		font-size: 0.75rem;
	}

	.p-1 {
		margin: 0 0.5rem;
	}
}